<template>
  <!-- 如果没有子菜单或子菜单为空，渲染为普通菜单项 -->
  <tui-menu-item v-if="!item.children || item.children.length === 0" :index="props.item.name" :route="item.path || '/'" :icon="item.icon">
    {{ item.title || item.name }}
  </tui-menu-item>

  <!-- 如果有子菜单，渲染为子菜单 -->
  <tui-submenu v-else :index="props.item.name" :icon="item.icon">
    <template #title>
      {{ item.title || item.name }}
    </template>

    <!-- 递归渲染子菜单 -->
    <recursive-menu-item v-for="child in item.children" :key="child.name" :item="child" />
  </tui-submenu>
</template>

<script setup lang="ts">
import type { TuiMenuItemData } from './types';


// 定义props
const props = defineProps<{
  item: TuiMenuItemData;
}>();

</script>

<style scoped>
/* 递归菜单项样式保持与原有样式一致 */
</style>